<template>
	<view class="registeredBox">
		<my-top :isback="true" :isline="true"></my-top>
		<view class="" v-if="classShow == 1">
			<view class="header">
				<i @click="back" class="iconfont todayfanhui"></i>
			</view>
			<my-mine-title title="填写手机号码" style="margin-top: 40rpx;"></my-mine-title>
			<view class="inputBox">
				<view class="pasdwordBox">
					<input maxlength="11" style="outline: none;" v-model="form.phone" class="ipt ipt2" placeholder="请输入手机号码"></input>
					<text @click="del" class="iconfont todayquxiao1"></text>
				</view>
				<button @click="sendCode" type="default" class="loginButton">登录</button>
			</view>
		</view>
		<view class="" v-if="classShow == 2">
			<view class="header">
				<i @click="back" class="iconfont todayfanhui"></i>
			</view>
			<my-mine-title :numberShow="true" :iphoneNumber="phoneRegNumber" title="填写注册信息" style="margin-top: 40rpx;"></my-mine-title>
			<view class="inputBox">
				<view class="accountdBox">
					<input maxlength="11" v-model="code" class="ipt ipt1" type="text" placeholder="输入验证码" />
					<view class="registered">
						<text @click="againCodeFn" v-if="againCode" style="font-size: 22rpx;color: #04A1FB;">获取验证码</text>
						<text v-else style="font-size: 22rpx;color: #999999;">重新发送{{countdown}}s</text>
					</view>
				</view>
				<view class="pasdwordBox">
					<input style="outline: none;" v-model="form.password" class="ipt ipt2" :type="pasdShow" placeholder="输入6-16位密码"></input>
					<view @click="seePasd" class="seepassword">
						<image v-if="pasdShow == 'text'" src="../../../static/img/seepasd.png" style="height: 100%;" mode=""></image>
						<image v-else src="../../../static/img/seepsd.png" style="height: 100%;" mode=""></image>
					</view>
				</view>
				<view class="" style="margin:24rpx 0 20rpx;display: flex;height: 30rpx;line-height: 30rpx;">
					<checkbox-group @change="checkboxChange">
						<checkbox value="1" :checked="false" />
					</checkbox-group>

					<text style="color: #BEBEBE;font-size: 20rpx;">
						我已阅读并同意
					</text>
					<text style="color: #04A1FB;font-size: 20rpx;">使用条款</text>
					<text style="color: #BEBEBE;font-size: 20rpx;">与</text>
					<text style="color: #04A1FB;font-size: 20rpx;">隐私协议</text>
				</view>
				<button @click="successLogin" type="default" class="loginButton">完成注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		smsCode,
		userRegistration,
		checkUserAlready
	} from "@/api/api.js"
	export default {
		data() {
			return {
				pasdShow: "password",
				form: {
					phone: "",
					password: ""
				},
				regCode: "/^(\d{3})\d*(\d{4})$/",
				classShow: 1, //切换显示
				phoneRegNumber: "",
				backPage: false,
				againCode: true,
				countdown: 60,
				intervalBtn: {},
				code: "", //用户输入验证码
				iscode: "", //后台发送验证码
				agree: false, //是否同意使用条款和隐私协议
			}
		},
		methods: {
			del(){
				this.form.phone = "";
			},
			// 完成注册
			successLogin() {
				
				try {
					if (!this.agree) {
						uni.showToast({
							title: '请先同意使用条款与隐私协议',
							icon: "none"
						})
					} else {
						if (this.code == this.iscode) {
							this.form.code = this.code;
							userRegistration(this.form).then(res => {
								if (res.statusCode == 200 && res.data.code == 0) {
									uni.showToast({
										title: "注册成功"
									})
									uni.navigateTo({
										url:"login",
										icon:"none"
									})
								}
							})

						} else {
							uni.showToast({
								title: "验证码输入错误",
								icon: "none"
							})
						}
					}

				} catch (e) {
					uni.showToast({
						title: "请稍等下重试"
					})
				}

			},
			// 是否同意协议
			checkboxChange(val) {
				if (val.detail.value == 1) {
					this.agree = true;
				} else {
					this.agree = false;
				}
			},
			// 查看输入密码
			seePasd() {
				if (this.pasdShow == "password") {
					this.pasdShow = "text"
				} else {
					this.pasdShow = "password"
				}
			},
			//再次发送验证码
			againCodeFn() {
				smsCode({
					phone: this.form.phone
				}).then(res => {
					if (res.statusCode == 200 && res.data.data.code) {
						this.iscode = res.data.data.code;
						this.againCode = false
						this.timer()
						uni.showToast({
							title: "验证码已发送",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "请检查网络后重试"
						})
					}
				})
			},
			sendCode() {
				if (this.form.phone) {
					let reg = this.reg(this.form.phone);
					if (!reg) {
						uni.showToast({
							title: "手机号码格式不正确！",
							icon: "none"
						})
					} else {
						checkUserAlready({
							phone: this.form.phone
						}).then(res => {
							if (res.statusCode == 200 && res.data.code == 0) {
								if (res.data.data == 1) {
									uni.showModal({
										title: '提示',
										content: '该账号已注册 是否前往登录',
										success: function(res) {
											if (res.confirm) {
												uni.redirectTo({
													url: "login"
												})
											} else if (res.cancel) {
												uni.showToast({
													title: "已注册 请前往登陆",
													icon: "none"
												})
											}
										}
									});
								} else if (res.data.data == 0) {
									smsCode({
										phone: this.form.phone
									}).then(res => {
										if (res.statusCode == 200 && res.data.data.code) {
											this.iscode = res.data.data.code;
											this.timer();
											this.againCode = false;
											this.backPage = true;
											uni.showToast({
												title: "验证码已发送",
												icon: "none"
											})
											this.classShow = 2;
											this.phoneRegNumber = this.form.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
										} else {
											uni.showToast({
												title: "请检查网络后重试"
											})
										}
									})
								}
							}
						})

					}
				} else {
					uni.showToast({
						title: "请输入手机号码",
						icon: "none"
					})
				}
			},
			timer() {
				if (this.againCode) {
					this.againCode = false
				}
				this.intervalBtn = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(this.intervalBtn)
						this.againCode = true;
						this.countdown = 60;
					} else {
						this.countdown--;
					}
				}, 1000);
			},
			reg(val) {
				return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val)
			},
			back() {
				if (this.backPage) {
					this.classShow = 1;
					for (let i in this.form) {
						this.form[i] = null;
					}
					this.backPage = false;
					this.countdown = 60;
					return
				}
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.todayquxiao1{
		color:#000000;
		font-size: 32rpx;
		border-radius: 50%;
		background-color: #DDDDDD;
	}
	.registeredBox{
		background-color: $today-bg-color;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	/deep/ uni-checkbox .uni-checkbox-input::before {
		background-color: rgb(0, 122, 255) !important;
	}

	.registered {
		width: 80%;
		color: #F93434;
		font-size: 22rpx;
		text-align: right;
		height: 60rpx;
		line-height: 60rpx;
	}

	.accountdBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
	}

	.button-hover {
		background: rgba(4, 161, 251, .8) !important;
	}

	.loginButton {
		margin-top: 48rpx;
		background-color: #4A83F1;
		color: #FFFFFF;
		font-size: 44rpx;
		border-radius: 20rpx;
		letter-spacing: 20rpx;
	}

	.seepassword {
		width: 40rpx;
		height: 32rpx;
	}

	.header {
		width: 100%;
		padding: 0 48rpx;
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		font-size: 40rpx;
		color: #999999;
		justify-content: space-between;

		text {
			color: #999999;
			font-size: 40rpx;
		}
	}

	.inputBox {
		width: 100%;
		padding: 0 48rpx;
		margin-top: 100rpx;
	}

	.pasdwordBox {
		display: flex;
		margin-top: 28rpx;
		border-bottom: 1px dashed #DDDDDD;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.ipt {
			color: $today-calender-color;;
		height: 61rpx;
		font-size: 32rpx;
		border: none;
	}

	.ipt2 {
		width: 90%;
	}
</style>
